<template>
	<view class="wrap">
	
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}"  label-position="left" label="姓名" prop="username" label-width="150" required>
				<u-input :border="true" placeholder="请输入姓名" v-model="model.username" ></u-input>
			</u-form-item>
			<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}"  label-position="left" label="岗位" prop="station" label-width="150" required>
				<u-input :border="true" placeholder="请输入岗位" v-model="model.station" ></u-input>
			</u-form-item>
			<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}"  label-position="left" label="性别" prop="gender" label-width="150" required>
				<u-radio-group class="item-wrapper" v-model="model.gender">
					<u-radio
						v-for="(item, index) in genderOptions"
						:key="item.key" 
						:name="item.key"
					>
						{{item.value}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}"  label-position="left" label="邮箱" prop="email" label-width="150" required>
				<u-input :border="true" placeholder="请输入邮箱" v-model="model.email" ></u-input>
			</u-form-item>
			<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}"  label-position="left" label="手机号" prop="mobile" label-width="150" required>
				<u-input :border="true" placeholder="请输入手机号" v-model="model.mobile" type='number'></u-input>
			</u-form-item>
			<!-- <u-form-item label-position="left" label="密码" prop="password">
				<u-input :password-icon="true" :border="true" type="password" v-model="model.password" placeholder="请输入密码"></u-input>
			</u-form-item>
			<u-form-item label-position="left" label="确认密码" label-width="150" prop="rePassword">
				<u-input :border="true" type="password" v-model="model.rePassword" placeholder="请确认密码"></u-input>
			</u-form-item> -->
		</u-form>
		<u-button @click="submit" size="default" type="primary" :ripple="true">提交</u-button>
	</view>
</template>

<script>
	import md5Libs from "uview-ui/libs/function/md5";
	const db = uniCloud.database();
	export default {
		data() {
			let that = this;
			return {
				model: {
					email: '',
					password: '',
					station:'',
					gender: 0,
					username:'',
					mobile:'',
					email_confirmed:1,
					mobile:'',
					mobile_confirmed:1,
				},
				genderOptions: [{			// 性别选项
					value: '未知',
					key: 0
				}, {
					value: '男',
					key: 1
				}, {
					value: '女',
					key: 2
				}],
				rules: {
					username: [
						{
							required: true,
							message: '请输入姓名',
							trigger: ['change','blur'],
						},
						// {
						// 	// 正则不能含有两边的引号
						// 	pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
						// 	message: '需同时含有字母和数字，长度在6-12之间',
						// 	trigger: ['change','blur'],
						// }
					],
					station: [
						{
							required: true,
							message: '请输入岗位',
							trigger: ['change','blur'],
						},
						
					],
					gender: [
						{
							required: true,
							message: '请选择性别'
						},
					],
					mobile: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号格式不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change','blur'],
						}
					],
					email: [
						{
							required: true,
							message: '请输入邮箱',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.email(value);
							},
							message: '邮箱格式不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change','blur'],
						}
					],
				},
				border: false,
				errorType: ['message']
			};
		},
		onLoad() {
		},
		computed: {
			borderCurrent() {
				return this.border ? 0 : 1;
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 提交前校验表单信息
			submit() {
				let that = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						that.register();
					}
				});
			},
			
			// 注册账户
			register(){
				let that = this;
				//注册测试账户
				this.request('common/user/register', {
					username: that.model.username,
					password: '1234@qwer',
					needPermission: false
				}).then(res => {
					if(res.code==0){
						that.updateUser(res.uid);
						//将当前登录态缓存到中间变量，让接下来的修改账户信息的行为正确
						uni.setStorageSync('uni_id_token_tem', uni.getStorageSync('uni_id_token'))
						uni.setStorageSync('uni_id_token_expired_tem', uni.getStorageSync('uni_id_token_expired'))
						uni.setStorageSync('uni_id_token', res.token)
						uni.setStorageSync('uni_id_token_expired', res.tokenExpired)
					}else{
						uni.showModal({
							showCancel: false,
							content: res.msg
						})
					}
				}).catch().finally(() => {
					uni.hideLoading()
				})
			},

			// 更新员工详细信息
			updateUser(uid){
				let that = this;
				delete that.model.password;
				db.collection('uni-id-users').doc(uid).update(that.model).then(res => {
					uni.showModal({
						showCancel: false,
						content: '创建成功',
						success() {
							//将修改后的登录态还原回去
							uni.setStorageSync('uni_id_token', uni.getStorageSync('uni_id_token_tem'))
							uni.setStorageSync('uni_id_token_expired', uni.getStorageSync('uni_id_token_expired_tem'))
							uni.navigateBack({
								delta: 1
							});
						}
					})
				}).catch((err) => {
					uni.showModal({
						showCancel: false,
						content: err.message || '请求服务失败',
					})
				}).finally(() => {
					uni.hideLoading();
				})
			},

			errorChange(index) {
				if(index == 0) this.errorType = ['message'];
				if(index == 1) this.errorType = ['toast'];
				if(index == 2) this.errorType = ['border-bottom'];
				if(index == 3) this.errorType = ['border'];
			}
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		padding: 30rpx;
	}
	
	.alternative {
		color: $u-tips-color;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;
		.agreement-text {
			padding-left: 8rpx;
			color: $u-tips-color;
		}
	}
</style>
